<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="审计单位">
              <j-select-depart v-model="queryParam.remid" :trigger-change="true" customReturnField="id"
                               :multi="false"></j-select-depart>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="被审计单位">
              <j-select-depart v-model="queryParam.mechanismId" :trigger-change="true" customReturnField="id"
                               :multi="false"></j-select-depart>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="计划年度">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format='YYYY'
                value-format="yyyy-MM-dd"
                v-model='queryParam.planYear'
                :open='yearPickShow'
                style='width: 100%'
                @panelChange="handlePanelChange"
                @openChange="handleOpenChange"/>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :md="6" :sm="8">
              <a-form-item label="项目类别">
                <j-dict-select-tag style='width: 100%' v-model="queryParam.type" placeholder="请选择"
                                   dict-code="pro_type"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="计划状态">
                <j-dict-select-tag style='width: 100%' v-model="queryParam.status" placeholder="请选择"
                                   dict-code="sj_plan_status"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="计划编号">
                <a-input placeholder="请输入" v-model="queryParam.number"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="计划名称">
                <a-input placeholder="请输入" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button>
              <a-button
                type="primary"
                style="margin-left: 8px"
                icon="download"
                :loading="loadingExp"
                @click="handleExportXls()"
                :disabled="!(dataSource.length > 0)"
              >导出</a-button
              >
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template v-slot:name="text">
        <j-ellipsis :value="text" :length="20"/>
      </template>
    </a-table>

<!--    <div v-if="tasks.length>0">
      <gantt-elastic
        :options="options"
        :tasks="tasks"
        @tasks-changed="tasksUpdate"
        @options-changed="optionsUpdate"
        @dynamic-style-changed="styleUpdate"
      >
        &lt;!&ndash;      <gantt-header class="gantt" :options="options" slot="header"></gantt-header>&ndash;&gt;
      </gantt-elastic>
      <a-pagination
        style="margin-top: 10px"
        v-model="ipagination.current"
        :total="ipagination.total"
        :page-size="ipagination.pageSize"
        @change="onChange"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-if="props.value === '50'">全部</span>
        </template>
      </a-pagination>
    </div>-->
  </a-card>
</template>

<style>
</style>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import GanttElastic from "gantt-elastic";
  import GanttHeader from "gantt-elastic-header";
  import {getAction} from '@/api/manage'
  import dayjs from "dayjs";
  import moment from "moment";
  import "moment/locale/zh-cn"
  import { currentY } from '@/mixins/commontime'
  import columns from '@views/sj/sjxmjhgl/ndsjjhjk/indexColumns'

  function getDate(hours) {
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();
    const currentDay = currentDate.getDate();
    const timeStamp = new Date(
      currentYear,
      currentMonth,
      currentDay,
      0,
      0,
      0
    ).getTime();
    var date = new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
    return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
  }

  var vue_self = "";

  function getVueSelf(data) {
    //得到vue中this
    vue_self = data;
  }

  let options = {
    taskMapping: {
      progress: "percent",
    },
    maxRows: 100,
    // maxHeight: 480,
    times: {
      //设置时间尺度timeZoom: 20,//设置右侧甘特图进度的列宽
      timeZoom: 21,
      // timeZoom: 20,
      // timeScale: 60 * 1000,
    },
    scope: {
      before: 5,
      after: 5,
    },
    row: {
      height: 30,
    },
    calendar: {
      hour: {
        display: false,
      },
    },
    chart: {
      progress: {
        bar: false,
      },
      expander: {
        display: true,
      },
    },
    title: {
      label: "任务视角",
      html: false,
    },

    taskList: {
      expander: {
        straight: false,
      },
      columns: [
        {
          id: 2,
          label: "被审计单位",
          value: "mechanismName",
          width: 200,
          html: true
        },
        {
          id: 3,
          label: "项目名称",
          value: "projectName",
          width: 200,
          html: true,
        },
        {
          id: 4,
          label: "计划编号",
          value: "number",
          width: 150,
          html: true,
        },
        {
          id: 5,
          label: "项目类别",
          value: "typeText",
          width: 200,
          html: true,
        },
        {
          id: 6,
          label: "开始时间",
          value: (task) => dayjs(task.start).format("YYYY-MM-DD"),
          width: 80,
        },
        {
          id: 7,
          label: "结束时间",
          value: (task) =>
            task.end == "无" ? task.end : dayjs(task.end).format("YYYY-MM-DD"),
          width: 80,
        },
      ],
    },
    locale: {
      name: "en",
      Now: "当前时间",
      "X-Scale": "宽",
      "Y-Scale": "高",
      "Task list width": "列头宽度",
      weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      months: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    },
  };

  export default {
    name: "Gantt",
    mixins: [JeecgListMixin],
    components: {
      GanttElastic,
      GanttHeader
    },
    data() {
      return {
        loadingExp: false,
        columns: columns(this),
        queryParam: {
          planYear: currentY(),
        },
        options,
        yearPickShow: false,
        dynamicStyle: {},
        lastId: 16,
        tasks: [],
        disableMixinCreated: true,
        url: {
          list: '/sjzyzhgl/sjPlanProjectInfo/projectGanttlist',
          exportXlsUrl: '/sjzyzhgl/sjPlanProjectInfo/exportXlsByTemplate',
        },
      };
    },
    mounted() {
      getVueSelf(this);
      this.searchQuery()
    },
    watch: {
      /*dataSource: {
        deep: true,
        handler: function (val) {
          val.forEach((item) => {
            item.percent = 0
            item.type = 'milestone'
            item.duration = Number(item.duration)
            item.start = Number(item.startDuration)
            item.end = Number(item.endDuration)
          })
          this.tasks = val
        }
      }*/
    },
    methods: {
      onChange(current) {
        this.ipagination.current = current
        this.loadData()

      },
      tasksUpdate(tasks) {
        this.tasks = tasks;
      },
      optionsUpdate(options) {
        this.options = options;
      },
      styleUpdate(style) {
        this.dynamicStyle = style;
      },
      // 弹出日历和关闭日历的回调
      handleOpenChange(status) {
        this.yearPickShow = status
        if(this.queryParam.planYear){
          this.queryParam.planYear = moment(this.queryParam.planYear.slice(0, 4)).format('YYYY')
        }
      },
      moment,
      // 得到年份选择器的值
      handlePanelChange(value) {
        this.yearPickShow = false
        this.queryParam.planYear = moment(value).format('YYYY')
      },
      handleExportXls() {
        this.loadingExp = true
        getAction(this.url.exportXlsUrl, this.queryParam).then(res => {
          if (res.success) {
            this.$message.success('正在下载，请稍等！')
            let url = `${window._CONFIG['domianURL']}/sys/common/static${res.result}`
            window.open(url, '_blank')
            this.loadingExp = false
          } else {
            this.$message.error(res.message)
          }
        }).finally(() => {
          this.loadingExp = false
        })
      }
    },
  };
</script>

<style scoped>
  .gantt >>> .gantt-elastic__header-btn-recenter {
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: #606266 !important;
    border: 1px solid #dcdfe6 !important;
    padding: 5px 10px !important;
  }

  .gantt >>> .gantt-elastic__header-btn-recenter:hover {
    background-color: #ecf5ff !important;
    border: 1px solid #b6d8fa !important;
  }

  .gantt >>> .gantt-elastic__header-title {
    display: none;
  }

  .gantt >>> .gantt-elastic__header-label {
    font-size: 16px;
    color: #303133;
  }

  .gantt >>> .gantt-elastic__header-task-list-switch--wrapper {
    font-size: 16px;
    color: #303133;
  }

  .gantt >>> .vue-switcher-theme--default.vue-switcher-color--default div {
    background-color: #409eff;
  }

  .gantt
  >>> .vue-switcher-theme--default.vue-switcher-color--default.vue-switcher--unchecked
  div {
    background-color: #dcdfe6;
  }

  .gantt >>> .vue-switcher-theme--default.vue-switcher-color--default div:after {
    background-color: #fff;
    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
  }

</style>